import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import {
  Navigation,
  Pagination,
  EffectCreative,
  Autoplay,
} from "swiper/modules";
import "./index.css";
export default function () {
  const bannerImg = [
    { id: 1, url: "/src/assets/images/indroction/swiper/上海江湾翰林.jpg" },
    { id: 2, url: "/src/assets/images/indroction/swiper/上海瑞虹新城1.jpg" },
    { id: 3, url: "/src/assets/images/indroction/swiper/上海瑞虹新城2.jpg" },
    { id: 4, url: "/src/assets/images/indroction/swiper/上海瑞虹新城3.jpg" },
    { id: 5, url: "/src/assets/images/indroction/swiper/上海瑞虹新城4.jpg" },
    { id: 6, url: "/src/assets/images/indroction/swiper/上海瑞虹新城5.jpg" },
    { id: 7, url: "/src/assets/images/indroction/swiper/上海瑞虹新城6.jpg" },
    { id: 8, url: "/src/assets/images/indroction/swiper/武汉天地1.jpg" },
    { id: 9, url: "/src/assets/images/indroction/swiper/武汉天地2.jpg" },
    { id: 10, url: "/src/assets/images/indroction/swiper/重庆天地1.jpg" },
    { id: 11, url: "/src/assets/images/indroction/swiper/重庆天地2.jpg" },
    { id: 12, url: "/src/assets/images/indroction/swiper/翠湖天地1.jpg" },
    { id: 13, url: "/src/assets/images/indroction/swiper/翠湖天地2.jpg" },
    { id: 14, url: "/src/assets/images/indroction/swiper/翠湖天地3.jpg" },
    { id: 15, url: "/src/assets/images/indroction/swiper/佛山岭南1.jpg" },
  ];
  return (
    <div className="indroction-wrapper">
      <div className="indroction-item about">
        <div className="arrow-btn"></div>
      </div>
      <div className="indroction-item project">
        <Swiper
          loop={true} //设置循环轮播
          className="mySwiper swiper-container"
          spaceBetween={-100} //设置堆叠轮播，item之间叠的距离
          slidesPerView="auto" //设置显示的数量
          autoplay={{
            delay: 3000,
            disableOnInteraction: false,
          }}
          navigation={true} //modules上加了同时要设置为true，才显示
          modules={[Autoplay, Navigation, Pagination, EffectCreative]}
          grabCursor={true}
          effect={"creative"} //modules上加了同时要设置
          centeredSlides={true} // 居中的slide是否标记为active，默认是最左active,这样样式即可生效
          slideToClickedSlide={false} // 点击的slide会居中
          creativeEffect={{
            prev: {
              //这里是设置当前item的前一项的具体属性
              translate: [-200, 0, 0], //偏移量，三个轴，X、Y、Z
              scale: 0.8, //缩放量
              opacity: 0.8, //透明度
              shadow: true, //是否加阴影
            },
            next: {
              //这里是设置当前item的后一项的具体属性，同上面
              translate: [200, 0, 0],
              scale: 0.8,
              opacity: 0.8,
              shadow: true,
            },
            // limitProgress: 2, //显示五个堆叠的最重要的这个属性，后面依次以前面属性等比配置
            shadowPerProgress: true, //是否等比配置透明度
          }}
          onClick={(swiper, event) => {
            //点击事件
            //回调函数，当你点击或轻触Swiper 后执行，相当于tap。
            //接受swiper实例和touchend事件作为参数。
            //Swiper5版本之前会有300ms延迟。
          }}
          onTouchEnd={(swiper, event) => {
            //回调函数，当碰触到slider时执行。可选Swiper实例和touchstart事件作为参数。
          }}
        >
          {bannerImg.map((item, index) => (
            <SwiperSlide key={item.id} style={{ width: 650, height: 500 }}>
              <img
                onClick={(e) => {
                  swiperClick(e, index);
                }}
                src={item.url}
                className="swiper-img"
                style={{ width: "100%", height: "100%" }}
              ></img>
            </SwiperSlide>
          ))}
        </Swiper>

        {/* <Swiper
          spaceBetween={50}
          slidesPerView={3}
          onSlideChange={() => console.log("slide change")}
          onSwiper={(swiper) => console.log(swiper)}
        >
          <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
          <SwiperSlide>Slide 4</SwiperSlide>
        </Swiper> */}
        <div className="arrow-btn"></div>
      </div>
      <div className="indroction-item honor">
        <div className="arrow-btn"></div>
      </div>

      <div className="indroction-item welfare"></div>
    </div>
  );
}
